<script>
export default {
  name: "imgDetail",
  data() {
    return {
      // 图片路径数组
      imagePaths: [
        require('@/assets/items/1.png'), // 第一张图片
        require('@/assets/items/2.png'), // 第二张图片（用于中间上半部分）
        require('@/assets/items/3.png'), // 第三张图片（用于中间下半部分）
        require('@/assets/items/4.png'), // 第四张图片
      ]
    };
  }
}
</script>

<template>
  <div style="width: 80%;margin: auto;" class="rec">
    <el-header class="" ><img src="@/assets/banner/title3.png" alt="" class="title"></el-header>
    <el-row type="flex" justify="space-between" :gutter="12" style="margin-top: 50px;">
      <el-col :span="6">
        <img :src="imagePaths[0]" alt="Image 1" class="grid-content bg-purple">
      </el-col>
      <el-col :span="6">
        <img :src="imagePaths[1]" alt="Image 4" class="grid-content bg-purple">
      </el-col>
      <el-col :span="6">
        <img :src="imagePaths[2]" alt="Image 4" class="grid-content bg-purple">
      </el-col>
      <el-col :span="6">
        <img :src="imagePaths[3]" alt="Image 4" class="grid-content bg-purple">
      </el-col>
    </el-row>
  </div>
</template>


<style scoped>
.rec {
  text-align: center; /* 设置文本居中 */
  width: 60%;
  margin: auto;
}
.title {
  margin: 10px auto;
  width: 25%;
//border: 1px solid black;
  border-radius: 5px;
//padding: 10px 0;
//height: auto;
  font-size: 20px;
  /*  margin-left: auto; !* 添加自动外边距实现水平居中 *!
    margin-right: auto; !* 添加自动外边距实现水平居中 *!*/
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.04);
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content, .middle-image {
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: auto; /* 或者设置一个固定高度，取决于你的需求 */
}

.middle-row {
  height: 100%; /* 如果需要，可以设置一个固定高度，或者通过其他方式控制高度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中，如果需要的话 */
}

</style>
